<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle boxBorder">
        <div class="topContentBox">
          <div style="width: 60%; display: inline-block">
            <el-select
              v-model="projectId"
              filterable
              placeholder="暂无关联项目"
            >
              <el-option
                v-for="(item, index) of projects"
                :key="index"
                :label="item.name"
                :value="item.code"
                @click.native="
                  changeProject(
                    item.code,
                    item.depositId,
                    item.name,
                    item.approvalStatus,
                    item.method,
                    item.payMethod
                  )
                "
              ></el-option>
            </el-select>
            <!-- WAIT_APPROVAL("01", "待审核"), REJECTED("02", "已驳回"),RECALL("03", "已撤回"), APPROVAL("04", "已审核"); -->
            <span
              v-if="
                !emptyBox &&
                method === 'FUNDDEPOSIT' &&
                (payMethod === 'ALL_NO_PAY' ||
                  payMethod === 'PART_PAY' ||
                  payMethod === 'WAIT_PAY')
              "
              :class="[
                startStatus,
                {
                  greenColor: statusDesc === '已审核',
                  grayColor: statusDesc === '已撤回',
                  redColor: statusDesc === '已驳回',
                  yellowColor: statusDesc === '待审核',
                },
              ]"
              >{{ statusDesc }}</span
            >
            <span
              v-if="
                !emptyBox &&
                (method === 'BANKGUARANTEE' ||
                  method === 'OWNERPOLICY' ||
                  method === 'BANKPOLICY')
              "
              :class="[
                startStatus,
                {
                  greenColor: statusDesc === '已审核',
                  grayColor: statusDesc === '已撤回',
                  redColor: statusDesc === '已驳回',
                  yellowColor: statusDesc === '待审核',
                },
              ]"
              >{{ statusDesc }}</span
            >
          </div>
          <!-- 资金存入-全额免缴 页面操作按钮 -->
          <div
            class="fr dbType"
            v-if="
              !emptyBox &&
              method === 'FUNDDEPOSIT' &&
              (payMethod === 'ALL_NO_PAY' ||
                payMethod === 'PART_PAY' ||
                payMethod === 'WAIT_PAY')
            "
          >
            <!-- <div class="fr dbType"> -->
            <!-- 待审核-> 撤回   已驳回/已撤回-> 修改 删除   已审核-> 无操作 -->
            <template v-if="statusDesc === '待审核'">
              <el-button
                @click="toRecallEvent()"
                class="commonBut saveBtn funComBut return"
                icon="icon iconfont iconchehui"
              >
                <span class="opetareText">撤回</span>
              </el-button>
            </template>
            <template
              v-else-if="statusDesc === '已撤回' || statusDesc === '已驳回'"
            >
              <el-button
                v-if="isShowUpdate"
                @click="updateEvent()"
                class="commonBut saveBtn funComBut"
                icon="icon iconfont iconbianji"
              >
                <span class="opetareText">修改</span>
              </el-button>
              <el-button
                v-if="isShowDel"
                @click="delCashDeposit"
                class="commonBut saveBtn funComBut delete"
                icon="icon iconfont iconshanchu"
              >
                <span class="opetareText">删除</span>
              </el-button>
            </template>
          </div>
          <dir
            class="fr dbType"
            v-if="method === 'FUNDDEPOSIT'"
            style="margin: 0 8px 0 0"
          >
            <el-link @click="handleBackBond">如何申请保证金退还？</el-link>
          </dir>
          <!-- 银行担保/业主担保/保险担保 页面操作按钮 -->
          <div
            class="fr dbType"
            v-if="
              !emptyBox &&
              (method === 'BANKGUARANTEE' ||
                method === 'OWNERPOLICY' ||
                method === 'BANKPOLICY')
            "
          >
            <!-- <div class="fr dbType"> -->
            <!-- 待审核-> 撤回       已驳回/已撤回-> 修改 删除   已审核-> 无操作 -->
            <template v-if="statusDesc === '待审核'">
              <el-button
                @click="toRecallEvent()"
                class="commonBut saveBtn funComBut return"
                icon="icon iconfont iconchehui"
              >
                <span class="opetareText">撤回</span>
              </el-button>
            </template>
            <template
              v-else-if="statusDesc === '已撤回' || statusDesc === '已驳回'"
            >
              <el-button
                v-if="isShowUpdate"
                @click="updateEvent()"
                class="commonBut saveBtn funComBut"
                icon="icon iconfont iconbianji"
              >
                <span class="opetareText">修改</span>
              </el-button>
              <el-button
                v-if="isShowDel"
                @click="delCashDeposit"
                class="funComBut delete"
                icon="icon iconfont iconshanchu"
              >
                <span class="opetareText">删除</span>
              </el-button>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="mainCons">
      <div slot="empty" class="emptyBox" v-if="emptyBox">
        <img src="../../../static/img/noData.png" alt />
        <emptyTable
          emptyText="本项目暂无保证金缴存信息，请及时申报或联系劳动监察部门"
          style="margin-top: 40px; margin-bottom: 40px; font-size: 16px"
        ></emptyTable>
        <el-button
          v-if="isShowAdd"
          class="commonBut saveBtn"
          type="primary"
          @click="addCashDeposit"
          >申报保证金备案</el-button
        >
      </div>
      <cashDepositPay
        :depositId="depositId"
        :payMethod="payMethod"
        :method="method"
        :projectId="projectId"
        @func="getmsg(arguments)"
        v-if="
          showCurrentPage &&
          method === 'FUNDDEPOSIT' &&
          (payMethod === 'ALL_PAY' ||
            payMethod === 'PART_PAY' ||
            payMethod === 'WAIT_PAY') &&
          !emptyBox
        "
      ></cashDepositPay>
      <cashDepositFree
        :depositId="depositId"
        :projectId="projectId"
        :payMethod="payMethod"
        v-if="
          showCurrentPage &&
          method === 'FUNDDEPOSIT' &&
          payMethod === 'ALL_NO_PAY' &&
          !emptyBox
        "
      ></cashDepositFree>
      <cashDepositGuarantee
        :depositId="depositId"
        :payMethod="payMethod"
        v-if="
          showCurrentPage &&
          (method === 'BANKGUARANTEE' ||
            method === 'OWNERPOLICY' ||
            method === 'BANKPOLICY') &&
          !emptyBox
        "
      ></cashDepositGuarantee>
    </div>
    <!-- 修改保证金记录弹框 -->
    <el-dialog
      title="修改缴纳记录"
      :visible.sync="payFormVisible"
      :close-on-click-modal="false"
      @close="closeFormDialog('payFormVisible', 'payForm')"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
    >
      <el-form
        :model="formData"
        label-width="130px"
        :rules="formRules"
        ref="formData"
        class="payFormXg"
        v-if="showForm"
      >
        <el-form-item label="项目名称">
          <el-select
            style="display: none"
            ref="projectNameSearch"
            v-model="formData.projectId"
            clearable
            filterable
            placeholder="请输入项目名称进行搜索"
          >
            <el-option
              v-for="(item, index) in projectOptions"
              :key="index"
              :label="item.projectName"
              :value="index"
            ></el-option>
          </el-select>
          <span>{{ projectName || '--' }}</span>
        </el-form-item>
        <el-form-item label="保证金缴纳方式" prop="method">
          <el-radio-group
            v-if="isHsUser()"
            v-model="formData.method"
            @change="payTypeChange"
          >
            <el-radio label="FUNDDEPOSIT">资金存入</el-radio>
            <el-radio label="BANKGUARANTEE">银行保函</el-radio>
            <el-radio label="BANKPOLICY">保险保单</el-radio>
          </el-radio-group>
          <el-radio-group
            v-else
            v-model="formData.method"
            @change="payTypeChange"
          >
            <el-radio label="FUNDDEPOSIT">资金存入</el-radio>
            <el-radio label="BANKGUARANTEE">银行保函</el-radio>
            <el-radio label="OWNERPOLICY">{{
              isXiangYangUser() ? '工程担保公司保函' : '业主担保'
            }}</el-radio>
            <el-radio label="BANKPOLICY">保险保单</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 选择资金存入才显示缴纳形式 -->
        <el-form-item
          class="radioTipsBox"
          label="缴纳形式"
          prop="payMethod"
          v-if="formData.method === 'FUNDDEPOSIT'"
        >
          <el-radio-group
            v-model="formData.payMethod"
            @change="payTypeChange"
            v-if="!cutSwitch"
          >
            <el-radio label="ALL_PAY">全额缴纳</el-radio>
            <el-radio label="PART_PAY">部分免缴</el-radio>
            <el-radio label="ALL_NO_PAY">全额免缴</el-radio>
            <el-radio label="WAIT_PAY">缓缴</el-radio>
          </el-radio-group>
          <el-radio-group
            v-model="formData.payMethod"
            @change="payTypeChange"
            v-if="cutSwitch && !openCut && !showWaitPay"
          >
            <el-radio label="ALL_PAY">全额缴纳</el-radio>
            <el-radio label="PART_PAY" disabled>部分免缴</el-radio>
            <el-radio label="ALL_NO_PAY" disabled>全额免缴</el-radio>
            <el-radio label="WAIT_PAY" disabled>缓缴</el-radio>
          </el-radio-group>
          <el-radio-group
            v-model="formData.payMethod"
            @change="payTypeChange"
            v-if="showWaitPay"
          >
            <el-radio label="ALL_PAY">全额缴纳</el-radio>
            <el-radio label="PART_PAY" disabled>部分免缴</el-radio>
            <el-radio label="ALL_NO_PAY" disabled>全额免缴</el-radio>
            <el-radio label="WAIT_PAY" v-if="loginType == 'XM'">缓缴</el-radio>
          </el-radio-group>
          <el-radio-group
            v-model="formData.payMethod"
            @change="payTypeChange"
            v-if="openCut && !showWaitPay"
          >
            <el-radio label="ALL_PAY">全额缴纳</el-radio>
            <el-radio label="PART_PAY" :disabled="forBird">部分免缴</el-radio>
            <el-radio label="ALL_NO_PAY" :disabled="forbidThree"
              >全额免缴</el-radio
            >
            <el-radio label="WAIT_PAY" v-if="loginType == 'XM'" disabled
              >缓缴</el-radio
            >
          </el-radio-group>
          <div
            class="radioTips"
            v-if="
              !forBird &&
              forbidThree &&
              loginType == 'XM' &&
              openCut &&
              !showWaitPay
            "
          >
            提示： 根据当前保证金制度，无法全额免缴及缓缴。
          </div>
          <div
            class="radioTips"
            v-if="forBird && loginType == 'XM' && openCut && !showWaitPay"
          >
            提示： 根据当前保证金制度，无法免缴及缓缴。
          </div>
          <div class="radioTips" v-if="showWaitPay && loginType == 'XM'">
            提示： 根据当前保证金制度，无法免缴
          </div>
        </el-form-item>

        <el-form-item label="缴纳单位" prop="reciveunit">
          <el-radio-group v-model="formData.reciveunit">
            <el-radio
              v-for="(item, index) in companyOptions"
              :key="index"
              :label="item.companyType"
              >{{ item.companyName }}({{
                item.companyType === '0' ? '建设方' : '施工方'
              }})</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <template
          v-if="
            formData.method === 'FUNDDEPOSIT' &&
            formData.payMethod === 'WAIT_PAY'
          "
        >
          <el-form-item label="缓缴周期">
            <el-date-picker
              type="daterange"
              placeholder="请选择保证金缓缴日期"
              :disabled="showWaitPay"
              range-separator="至"
              v-model="operationDate"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="缴纳日期" prop="operationDate">
            <el-date-picker
              class="ratioWidth"
              type="date"
              placeholder="请选择保证金缴纳日期"
              v-model="formData.operationDate"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </template>
        <!-- 资金存入-（全额缴纳/部分免缴）存在缴纳银行和缴纳账号信息 -->
        <el-form-item
          label="缴纳银行"
          prop="bankOne"
          v-if="
            formData.method === 'FUNDDEPOSIT' &&
            (formData.payMethod === 'ALL_PAY' ||
              formData.payMethod === 'PART_PAY')
          "
        >
          <el-radio-group v-model="formData.bankOne" @change="changeBankName">
            <el-radio
              v-for="(item, index) in bankNameList"
              :key="index"
              :label="item.bankId + ',' + item.account + ',' + item.bankName"
              >{{ item.bankName }}</el-radio
            >
          </el-radio-group>
          <span style="color: red" v-if="noBank">
            <i class="icon iconfont iconshengming"></i>
            该项目所在的区域暂未设置缴纳银行
          </span>
        </el-form-item>
        <el-form-item
          label="缴纳账号"
          prop="depositAccountId"
          v-if="
            formData.method === 'FUNDDEPOSIT' &&
            (formData.payMethod === 'ALL_PAY' ||
              formData.payMethod === 'PART_PAY')
          "
        >
          <span style="color: #606266">{{ formData.account }}</span>
        </el-form-item>
        <el-form-item label="应缴金额" prop="shouldPay">
          <el-radio-group v-model="formDataShouldPay" @change="agreeChange()">
            <el-radio
              v-if="item.depositConfig"
              :label="item.shouldPay + '-' + item.depositConfig.scale"
              :key="index"
              v-for="(item, index) in amountPayableList"
            >
              <span v-if="item.sectionType == 1"
                >{{ item.shouldPay }}元 【
                <span
                  v-for="(items, indexs) in item.depositConfigs"
                  :key="indexs"
                >
                  <span v-if="indexs == 0"
                    >{{ items.max * 10000 }}*{{ items.scale }}%
                    <span v-if="indexs < item.depositConfigs.length - 1"
                      >+</span
                    ></span
                  >
                  <span v-else>
                    <span v-if="item.total&lt;items.max*10000"
                      >({{ item.total }}-{{
                        item.depositConfigs[indexs - 1].max * 10000
                      }})*{{ items.scale }}%
                      <span v-if="indexs < item.depositConfigs.length - 1"
                        >+</span
                      ></span
                    >
                    <span v-else
                      >({{ items.max * 10000 }}-{{ items.min * 10000 }})*{{
                        items.scale
                      }}%
                      <span v-if="indexs < item.depositConfigs.length - 1"
                        >+</span
                      ></span
                    >
                  </span> </span
                >,最高限额{{ item.upperLimit }}元】
              </span>
              <span v-else
                >{{ item.shouldPay }}元({{ item.total }}*{{
                  item.depositConfig.scale
                }}%,最高限额{{ item.depositConfig.upperLimit }}元)</span
              >
            </el-radio>
            <el-radio
              v-else
              :label="item.shouldPay + '-' + item.depositConfigs[0].scale"
              :key="index"
              v-for="(item, index) in amountPayableList"
            >
              <span v-if="item.sectionType == 1"
                >{{ item.shouldPay }}元 【
                <span
                  v-for="(items, indexs) in item.depositConfigs"
                  :key="indexs"
                >
                  <span v-if="indexs == 0"
                    >{{ items.max * 10000 }}*{{ items.scale }}%
                    <span v-if="indexs < item.depositConfigs.length - 1"
                      >+</span
                    ></span
                  >
                  <span v-else>
                    <span v-if="item.total&lt;items.max*10000"
                      >({{ item.total }}-{{
                        item.depositConfigs[indexs - 1].max * 10000
                      }})*{{ items.scale }}%
                      <span v-if="indexs < item.depositConfigs.length - 1"
                        >+</span
                      ></span
                    >
                    <span v-else
                      >({{ items.max * 10000 }}-{{ items.min * 10000 }})*{{
                        items.scale
                      }}%
                      <span v-if="indexs < item.depositConfigs.length - 1"
                        >+</span
                      ></span
                    >
                  </span> </span
                >,最高限额{{ item.upperLimit }}元】
              </span>
              <span v-else
                >{{ item.shouldPay }}元({{ item.total }}*{{
                  item.depositConfigs[0].scale
                }}%,最高限额{{ item.depositConfigs[0].upperLimit }}元)</span
              >
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <template
          v-if="
            formData.method === 'BANKGUARANTEE' ||
            formData.method === 'OWNERPOLICY' ||
            formData.method === 'BANKPOLICY'
          "
        >
          <el-form-item label="担保金额" prop="payTotal">
            <el-input
              class="ratioWidth"
              v-model.trim="formData.payTotal"
              placeholder="请输入担保金额"
            ></el-input>
            <span class="unitMaLf">元</span>
          </el-form-item>
          <el-form-item label="担保机构" prop="guaranteeName">
            <el-input
              class="ratioWidth"
              maxlength="200"
              v-model.trim="formData.guaranteeName"
              placeholder="请填写担保机构全称"
            ></el-input>
          </el-form-item>
          <el-form-item label="担保生效日" prop="guaranteeStartDate">
            <el-date-picker
              class="ratioWidth"
              type="date"
              placeholder="请选择保函/担保生效的日期"
              v-model="formData.guaranteeStartDate"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="担保到期日" prop="guaranteeEndDate">
            <el-date-picker
              class="ratioWidth"
              type="date"
              placeholder="请选择保函/担保到期的日期"
              v-model="formData.guaranteeEndDate"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </template>
        <template
          v-else-if="
            formData.method === 'FUNDDEPOSIT' &&
            formData.payMethod === 'PART_PAY'
          "
        >
          <el-form-item label="减免金额" prop="reduceMoney">
            <el-input
              class="ratioWidth"
              @blur.prevent="changeCount()"
              v-model.trim="formData.reduceMoney"
              placeholder="请输入减免金额"
            ></el-input>
            <span class="unitMaLf">元</span>
          </el-form-item>
          <el-form-item label="实缴金额">
            <span class="shouldTotal greenWord">{{ calculatePayTotal }}元</span>
          </el-form-item>
        </template>
        <template
          v-else-if="
            formData.method === 'FUNDDEPOSIT' &&
            formData.payMethod === 'ALL_NO_PAY'
          "
        >
          <el-form-item label="免缴金额">
            <span class="shouldTotal greenWord"
              >{{ formData.shouldPay }}元</span
            >
          </el-form-item>
        </template>
        <template
          v-else-if="
            formData.method === 'FUNDDEPOSIT' &&
            formData.payMethod === 'ALL_PAY'
          "
        >
          <el-form-item label="实缴金额" prop="payTotal">
            <el-input
              class="ratioWidth"
              style="position: relative"
              v-model.trim="formData.payTotal"
              placeholder="请输入实缴金额"
            ></el-input>
            <span class="unitMaLf greenWord">元</span>
          </el-form-item>
        </template>
        <el-form-item label="业务办理人" prop="operator">
          <el-input
            class="ratioWidth"
            maxlength="10"
            v-model.trim="formData.operator"
            placeholder="请填写业务实际处理人员姓名"
          ></el-input>
        </el-form-item>
        <template
          v-if="
            formData.method === 'FUNDDEPOSIT' &&
            (formData.payMethod === 'PART_PAY' ||
              formData.payMethod === 'ALL_NO_PAY' ||
              formData.payMethod === 'WAIT_PAY')
          "
        >
          <el-form-item
            :label="
              formData.payMethod === 'PART_PAY'
                ? '减免原因'
                : formData.payMethod === 'ALL_NO_PAY'
                ? '免缴原因'
                : '缓缴原因'
            "
            prop="reduceRemark"
          >
            <el-input
              type="textarea"
              v-model.trim="formData.reduceRemark"
              autocomplete="off"
              :placeholder="
                formData.payMethod === 'PART_PAY'
                  ? '请填写保证金减免原因'
                  : formData.payMethod === 'ALL_NO_PAY'
                  ? '请填写保证金免缴原因'
                  : '请填写缓缴原因'
              "
              maxlength="200"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              formData.payMethod === 'PART_PAY'
                ? '减免凭证'
                : formData.payMethod === 'ALL_NO_PAY'
                ? '免缴凭证'
                : '缓缴凭证'
            "
            prop="reducePayImg"
          >
            <div class="uploadBoxPay">
              <uploadAnnex
                @getFileList="getFileList"
                :limitationFactor="limitationFactor"
                @getFile="getFile"
                :upLoadFile="upLoadFile"
              />
            </div>
          </el-form-item>
          <div
            id="cutRule"
            ref="imageWrapper"
            v-show="
              (formData.payMethod === 'PART_PAY' ||
                formData.payMethod === 'ALL_NO_PAY') &&
              openCut &&
              (!forBird || !forbidThree) &&
              !payFormVisible
            "
          >
            <div class="title">保证金减免凭证</div>
            <table
              border="1"
              cellspacing="0"
              cellpadding="0"
              style="width: 100%"
            >
              <tr>
                <td>日期</td>
                <td>{{ cutRulesDetail.Date }}</td>
                <td>评价等级</td>
                <td>{{ cutRulesDetail.projectLevel }}</td>
              </tr>
              <tr>
                <td>减免比例</td>
                <td>{{ cutRulesDetail.percent }}</td>
                <td>可减免金额</td>
                <td>{{ cutRulesDetail.freePay }}元</td>
              </tr>
            </table>
          </div>
          <div
            id="cutRuleHG"
            ref="imageWrapperHG"
            v-show="
              formData.payMethod === 'WAIT_PAY' &&
              showWaitPay &&
              !payFormVisible
            "
          >
            <div class="title">保证金缓缴凭证</div>
            <table border="1" cellspacing="0" cellpadding="0">
              <tr>
                <td>日期</td>
                <td>{{ HGInfo.date }}</td>
                <td>评价等级</td>
                <td>{{ HGInfo.projectLevel }}</td>
              </tr>
              <tr>
                <td>缓缴周期</td>
                <td colspan="3">{{ HGInfo.wayPayCycle }}</td>
              </tr>
            </table>
          </div>
          <el-row v-model="formData.contractImgUrl">
            <uploadResult
              style="margin-left: 120px"
              :resultList="upLoadFile"
              @callBackResult="getFile"
            />
          </el-row>
        </template>
        <template v-else>
          <el-form-item label="缴纳原因" prop="remark">
            <el-input
              type="textarea"
              v-model.trim="formData.remark"
              autocomplete="off"
              placeholder="请填写缴纳备注信息"
              maxlength="200"
            ></el-input>
          </el-form-item>
        </template>
        <!--黄石地区 缴纳形式为【资金存入】，在缴纳凭证字段上方，需新增付款银行账户信息填写表单 -->
        <div v-if="isHsUser() && formData.method === 'FUNDDEPOSIT'">
          <el-form-item label="付款银行账户" prop="remark">
            <p class="formItemTip">
              填写企业付款银行账号，不支持个人账户转账，后期保证金退还将原路退回
            </p>
          </el-form-item>
          <el-form-item label="开户银行">
            <el-input
              v-model.trim="formData.institution"
              class="ratioWidth"
              autocomplete="off"
              placeholder="请输入付款账户开户银行，如工商银行等"
            ></el-input>
          </el-form-item>
          <el-form-item label="支行名称">
            <el-input
              v-model.trim="formData.branch"
              class="ratioWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="账户名称">
            <el-input
              v-model.trim="formData.name"
              class="ratioWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行卡号">
            <el-input
              v-model.trim="formData.cardCode"
              class="ratioWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
        <!--黄石地区 缴纳形式为【银行保函】或【保险保单】 需新增填写寄件信息-->
        <div
          v-if="
            isHsUser() &&
            ['BANKGUARANTEE', 'BANKPOLICY'].includes(formData.method)
          "
        >
          <el-form-item label="寄件信息" prop="remark">
            <p class="formItemTip">
              企业需要提前将保函或保单快递至劳动监察部门，查看
              <el-link @click="downLoadFile('sendFiles')">收件信息</el-link>
            </p>
            <p class="formItemTip">请在寄件后填写寄件人信息</p>
          </el-form-item>
          <el-form-item label="寄件人姓名">
            <el-input
              v-model.trim="formData.institution"
              class="ratioWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model.trim="formData.branch"
              class="ratioWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递公司">
            <el-input
              v-model.trim="formData.name"
              class="ratioWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递单号">
            <el-input
              v-model.trim="formData.cardCode"
              class="ratioWidth"
              autocomplete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="寄件凭证">
            <uploadAnnex
              @getFileList="getExpressFileList"
              :limitationFactor="limitationExpress"
              @getFile="getExpressFile"
              :upLoadFile="expressFile"
            />
          </el-form-item>
          <el-row v-model="formData.senderFileJson">
            <uploadResult
              style="margin-left: 120px"
              :resultList="expressFile"
              @callBackResult="getExpressFile"
            />
          </el-row>
        </div>
        <!-- 非资金存入及资金存入全额缴纳/部分缴纳有缴纳凭证 -->
        <template
          v-if="
            formData.method !== 'FUNDDEPOSIT' ||
            (formData.method === 'FUNDDEPOSIT' &&
              (formData.payMethod === 'ALL_PAY' ||
                formData.payMethod === 'PART_PAY'))
          "
        >
          <el-form-item
            :label="
              isHsUser() &&
              ['BANKGUARANTEE', 'BANKPOLICY'].includes(formData.method)
                ? '保单保函'
                : '缴纳凭证'
            "
            prop="contractImgUrl"
          >
            <uploadAnnex
              @getFileList="getFileListPay"
              :limitationFactor="limitationFactorPay"
              @getFile="getFilePay"
              :upLoadFile="uploadPayFile"
            />
          </el-form-item>
          <el-row v-model="formData.contractImgUrl">
            <uploadResult
              style="margin-left: 120px"
              :resultList="uploadPayFile"
              @callBackResult="getFilePay"
            />
          </el-row>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click.native="closeFormDialog('payFormVisible', 'formData')"
          >取 消</el-button
        >
        <el-button
          type="primary"
          class="save"
          @click.native="saveToDetail('formData', 'payFormVisible')"
          :loading="isSaveLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="如何申请保证金退还"
      :visible.sync="showBackBond"
      :close-on-click-modal="false"
      @close="closeBackBond"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="700px"
    >
      <ul class="bondTips">
        <li>
          <p>
            工程建设项目完工并通过交(竣)工验收后,由缴款单位提供下列资料，向人力资源和社会保障行政部门申报退还农民工工资保证金:
          </p>
        </li>
        <li>
          <p>
            1.黄石市建设项目退还农民工工资保证金申请表;<el-link
              @click="downLoadFile('returnDepositFiles')"
              >下载</el-link
            >
          </p>
        </li>
        <li>
          <p>2.建设主管部门退款审批意见; (第 1项申请表中盖章)</p>
        </li>
        <li>
          <p>3.工程竣工备案证;</p>
        </li>
        <li>
          <p>
            4.农民工工资发放情况说明;<el-link
              @click="downLoadFile('salaryPayFiles')"
              >下载</el-link
            >
          </p>
        </li>
        <li>
          <p>5.农民工工资保证金缴款收据复印件、银行进账单;</p>
        </li>
        <li>
          <p>6.经办人身份证(复印件) ;</p>
        </li>
        <li>
          <p>
            7.退还保证金法人委托书;<el-link
              @click="downLoadFile('depositEntrustFiles')"
              >下载</el-link
            >
          </p>
        </li>
        <li>
          <p>8.退还农民工工资保证金报纸公示(公示期一个月) ;</p>
        </li>
        <li>
          <p>9.退款收据。</p>
        </li>
        <li>
          <p>备注:退款单位提供的资料复印件均需加盖公章。</p>
        </li>
        <li>
          <p>
            人力资源和社会保障行政部]收到退款申请后，由劳动保障监察机构及时核实该工程建设项目是否存在欠薪投诉。有
            欠薪问题的，应妥善处苦后再按程序办理退款手续。未发现欠薪问题的，经人力资源和社会保障行政部门分管领导审
            批同意后本息足额退还。
          </p>
        </li>
        <li>
          <p>《东楚晚报》联系人:郭主任</p>
        </li>
        <li>
          <p>
            <span>联系电话: 13807230604</span><span>办公电话: 6341055</span>
          </p>
        </li>
        <li>
          <p>
            <span>公示解释人:梅欢欢郭梦莹</span><span>联系电话: 6281658</span>
          </p>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
// 资金存入---全额缴存/部分免缴/缓缴 页面
import cashDepositPay from '@/components/cashDeposit/cashDepositPay'
// 资金存入---全额免缴  页面
import cashDepositFree from '@/components/cashDeposit/cashDepositFree'
// 银行担保/业主担保/保险担保
import cashDepositGuarantee from '@/components/cashDeposit/cashDepositGuarantee'

import common from '../../kits/common'
import areaJudgment from '../../kits/areaJudgment.js'
export default {
  name: 'cashDepositList',
  components: {
    cashDepositPay,
    cashDepositFree,
    cashDepositGuarantee,
  },
  data() {
    var checkMoney = (rule, value, callback) => {
      if (!value) {
        if (
          this.formData.method === 'BANKGUARANTEE' ||
          this.formData.method === 'OWNERPOLICY' ||
          this.formData.method === 'BANKPOLICY'
        ) {
          return callback(new Error('担保金额不能为空'))
        } else if (
          this.formData.method === 'FUNDDEPOSIT' &&
          this.formData.payMethod === 'ALL_PAY'
        ) {
          return callback(new Error('实缴金额不能为空'))
        }
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || value == 0.0 || value == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else {
          if (value >= 100000000000) {
            callback(new Error('金额需小于1000亿'))
          } else {
            callback()
          }
        }
      }
    }
    var checkMoneyReduce = (rule, value, callback) => {
      let shouldPay = this.formDataShouldPay.split('-')[0]
      if (!value) {
        return callback(new Error('减免金额不能为空'))
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || value == 0.0 || value == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else if (!shouldPay) {
          callback(new Error('请先选择应缴金额'))
        } else if (
          shouldPay &&
          (Number(value) > Number(shouldPay) ||
            Number(value) == Number(shouldPay))
        ) {
          callback(new Error('减免金额需小于应缴金额'))
        } else {
          if (
            this.loginType == 'XM' &&
            value > this.cutRules * 1 &&
            this.openCut
          ) {
            callback(new Error(`当前最高可减免${this.cutRules}元`))
            // this.formData.reduceMoney = 0
            // this.changeCount()
          } else {
            callback()
          }
        }
      }
    }
    var checkShouldPay = (rule, value, callback) => {
      if (!this.formDataShouldPay) {
        return callback(new Error('应缴金额不能为空'))
      } else {
        callback()
      }
    }
    var checkPayDate = (rule, value, callback) => {
      if (!value) {
        if (
          this.formData.method === 'FUNDDEPOSIT' &&
          this.formData.payMethod === 'WAIT_PAY'
        ) {
          return callback(new Error('缓缴日期不能为空'))
        } else {
          return callback(new Error('缴纳日期不能为空'))
        }
      } else {
        callback()
      }
    }
    var checkDate = (rule, value, callback) => {
      var guaranteeStartDate = this.formData.guaranteeStartDate
      var guaranteeEndDate = this.formData.guaranteeEndDate
      if (!guaranteeEndDate) {
        return callback(new Error('保函/担保到期的日期不能为空'))
      } else if (guaranteeStartDate > guaranteeEndDate) {
        return callback(new Error('担保到期日不能小于担保生效日'))
      } else {
        callback()
      }
    }
    //缴纳凭证验证
    var checkPayUploadFile = (rule, value, callback) => {
      if (this.uploadPayFile.length === 0) {
        if (
          this.isHsUser() &&
          ['BANKGUARANTEE', 'BANKPOLICY'].includes(this.formData.method)
        ) {
          return callback(new Error('保单保函不能为空'))
        } else {
          return callback(new Error('缴纳凭证不能为空'))
        }
      } else {
        callback()
      }
    }
    var checkReason = (rule, value, callback) => {
      if (!value && this.formData.method === 'FUNDDEPOSIT') {
        if (this.formData.payMethod === 'PART_PAY') {
          return callback(new Error('减免原因不能为空'))
        } else if (this.formData.payMethod === 'ALL_NO_PAY') {
          return callback(new Error('免缴原因不能为空'))
        } else if (this.formData.payMethod === 'WAIT_PAY') {
          return callback(new Error('缓缴原因不能为空'))
        }
      } else {
        callback()
      }
    }
    var checkUploadFileReduce = (rule, value, callback) => {
      if (this.upLoadFile.length === 0) {
        if (this.formData.method === 'FUNDDEPOSIT') {
          if (this.formData.payMethod === 'PART_PAY') {
            return callback(new Error('减免凭证不能为空'))
          } else if (this.formData.payMethod === 'ALL_NO_PAY') {
            return callback(new Error('免缴凭证不能为空'))
          } else if (this.formData.payMethod === 'WAIT_PAY') {
            return callback(new Error('缓缴凭证不能为空'))
          }
        }
      } else {
        callback()
      }
    }
    var checkExpressFile = (rule, value, callback) => {
      if (this.expressFile.length === 0) {
        return callback(new Error('寄件凭证不能为空'))
      } else {
        callback()
      }
    }
    return {
      //表格数据
      projects: [],
      projectId: '',
      depositId: '',
      projectName: '',
      startStatus: 'startStatus', //状态样式
      formDataShouldPay: '',
      statusDesc: '',
      disabled: true,
      projectStatus: '', //开工状态
      method: '', //缴纳方式
      payMethod: '', //缴纳形式
      emptyBox: false, //空数据页面
      showCurrentPage: true,
      projectOptions: [], //项目名称下拉框
      companyOptions: [], //缴纳单位
      bankNameList: [],
      calculatePayTotal: '', //部分免缴计算的实缴
      formData: {
        projectName: '',
        projectJson: '',
        projectId: '', //项目名称
        method: 'FUNDDEPOSIT', //缴纳方式
        payMethod: 'ALL_PAY', //缴纳形式
        reciveunit: '', //缴纳单位
        operationDate: '', //缴纳日期
        guaranteeStartDate: '', //担保生效日
        guaranteeEndDate: '', //担保到期日
        bankOne: '', //缴纳银行
        bankName: '',
        account: '通过选择银行带入', //缴纳账号
        shouldPay: '', //应缴金额
        total: '', //工程造价
        scale: '', //工程造价比例
        upperLimit: '', //最高限额
        reduceMoney: '', //减免金额
        payTotal: '', //实缴金额
        guaranteeName: '', //担保机构
        operator: '', //业务办理人
        remark: '', //缴纳原因
        reduceRemark: '', //减免原因
        contractImgUrl: [], //合同附件
      },
      noBank: false,
      upLoadFile: [], //附件
      cardFile: [],
      srcList: [],
      oldSrcList: [],
      uploadPayFile: [],
      paySrcList: [],
      oldPaySrcList: [],
      //验证
      formRules: {
        method: [
          {
            required: true,
            message: '请选择缴纳方式',
            trigger: ['blur', 'change'],
          },
        ],
        payMethod: [
          {
            required: true,
            message: '请选择缴纳形式',
            trigger: ['blur', 'change'],
          },
        ],
        reciveunit: [
          {
            required: true,
            message: '请选择缴纳单位',
            trigger: 'change',
          },
        ],
        operationDate: [
          {
            required: true,
            // message: "日期不能为空",
            validator: checkPayDate,
            trigger: 'change',
          },
        ],
        bankOne: [
          {
            required: true,
            message: '请选择缴纳银行',
            trigger: 'change',
          },
        ],
        operator: [
          {
            // pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '只能输入汉字',
            trigger: 'blur',
          },
        ],
        reduceMoney: [
          {
            required: true,
            validator: checkMoneyReduce,
            // message: "减免金额不能为空",
            trigger: 'blur',
          },
        ],
        payTotal: [
          {
            required: true,
            validator: checkMoney,
            trigger: 'blur',
          },
        ],
        shouldPay: [
          {
            required: true,
            validator: checkShouldPay,
            // message: "应缴金额不能为空",
            trigger: 'blur',
          },
        ],
        guaranteeName: [
          {
            required: true,
            message: '担保机构不能为空',
            trigger: 'blur',
          },
        ],
        guaranteeStartDate: [
          {
            required: true,
            message: '保函/担保生效的日期不能为空',
            trigger: 'change',
          },
        ],
        guaranteeEndDate: [
          {
            required: true,
            validator: checkDate,
            // message: "保函/担保到期的日期不能为空",
            trigger: 'change',
          },
        ],
        reduceRemark: [
          {
            required: true,
            // message: "原因不能为空",
            validator: checkReason,
            trigger: 'blur',
          },
        ],
        reducePayImg: [
          {
            required: true,
            validator: checkUploadFileReduce,
            trigger: 'change',
          },
        ],
        contractImgUrl: [
          {
            required: true,
            // message: "缴纳凭证不能为空",
            validator: checkPayUploadFile,
            trigger: 'change',
          },
        ],
      },
      isSaveLoading: false, // 保存loading
      total: 0,
      showForm: true, //重新渲染表单，避免验证问题
      isShowAdd: '',
      isShowUpdate: '',
      isShowDel: '',
      payFormVisible: false,
      amountPayableList: [], //应缴金额数组
      currentProjectAreaId: '', //当前项目区域id
      currentProjectTotal: '', //当前项目total
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip: '', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      limitationFactorPay: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel1', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm1', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip: '', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      newImg: '',
      cutRules: 0,
      cutRulesDetail: {},
      maxShouldPay: 0,
      showWaitPay: false, //显示缓缴
      operationDate: [],
      HGInfo: {},
      loginType: '',
      openCut: false, //配置打开的时候才使用减免规则
      openHG: false,
      cutSwitch: true,

      showBackBond: false,

      checkExpressFile,
      expressFile: [],
      expressSrcList: [],
      oldExpressSrcList: [],
      limitationExpress: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel2', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm2', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上寄件凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
    }
  },
  async mounted() {
    // if (localStorage.getItem("isFirstUseCashDeposit")) {
    this.loginType = localStorage.getItem('loginType')
    this.method = this.$route.query.method
    this.payMethod = this.$route.query.payMethod
    // this.statusDesc = this.$route.query.statusDesc;
    if (this.method || this.payMethod) {
      this.emptyBox = false
    }
    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
    this.depositId = this.$route.query.depositId
    await this.getProjects()
    //通过接口获取状态，避免传值刷新存在bug
    if (this.depositId) {
      this.loadDetail()
    }
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('depositList:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('depositListSGF:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('depositListJSF:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('depositList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('depositListSGF:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('depositListJSF:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('depositList:delete') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('depositListSGF:delete') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('depositListJSF:delete') > -1
    // } else {
    if (areaJudgment.isHsUser()) {
      // next("/home/cashDeposit/cashDepositExplainHS");
    } else {
      if (!localStorage.getItem('isFirstUseCashDeposit')) {
        this.$router.push({ path: '/home/cashDeposit/cashDepositExplain' })
      }

      // next("/home/cashDeposit/cashDepositExplain");
    }
    //   return
    // }
  },
  // 引导页面
  // beforeRouteEnter(to, from, next) {
  //   console.log(localStorage.getItem("isFirstUseCashDeposit") == "false");
  //   if (localStorage.getItem("isFirstUseCashDeposit")) {
  //     next();
  //   } else {
  //     if(areaJudgment.isHsUser()){
  //         next("/home/cashDeposit/cashDepositExplainHS");
  //     }else{
  //         next("/home/cashDeposit/cashDepositExplain");
  //     }

  //   }
  // },
  computed: {
    forBird() {
      if (this.cutRules == 0 || this.cutRules == '0.00') {
        return true
      }
      return false
    },
    forbidThree() {
      if (
        this.cutRules == 0 ||
        this.cutRules == '0.00' ||
        this.cutRules * 1 < this.maxShouldPay
      ) {
        return true
      }
      return false
    },
  },
  methods: {
    getExpressFileList(val) {
      this.expressSrcList.push(val)
      this.oldExpressSrcList.push(val)
    },

    getExpressFile(val) {
      this.expressFile = val
    },
    handleBackBond() {
      this.showBackBond = true
    },
    closeBackBond() {
      this.showBackBond = false
    },
    downLoadFile(type) {
      this.axios({
        method: 'post',
        url: 'api-p/deposit/expand/findurl',
        data: {
          type: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    toImage() {
      if (this.$refs.imageWrapper) {
        html2canvas(this.$refs.imageWrapper).then((canvas) => {
          let dataURL = canvas.toDataURL('image/png')
          this.newImg = dataURL
          this.axios
            .post('api-f/files/upload/base64', { image64: dataURL })
            .then((res) => {
              let obj = res.data
              obj.name = '保证金减免凭证'
              obj.id = new Date().getTime()
              this.$set(this.upLoadFile, 0, obj)
              this.getFileList(obj.url)
              this.getFile([obj])
            })
          document.getElementById('cutRule').style.display = 'none'
          this.formData.reduceRemark = ''
        })
      }
    },
    toImageHG() {
      if (this.$refs.imageWrapperHG) {
        html2canvas(this.$refs.imageWrapperHG).then((canvas) => {
          let dataURL = canvas.toDataURL('image/png')
          this.newImg = dataURL
          this.axios
            .post('api-f/files/upload/base64', { image64: dataURL })
            .then((res) => {
              let obj = res.data
              obj.name = '保证金缓缴凭证.png'
              obj.id = new Date().getTime()
              this.$set(this.upLoadFile, 0, obj)
              this.getFileList(obj.url)
              this.getFile([obj])
            })
          document.getElementById('cutRuleHG').style.display = 'none'
          this.formData.reduceRemark =
            '根据保证金缓缴制度，项目符合保证金缓缴条件'
        })
      }
    },
    //获取可减免金额
    getCutRules(shouldPay) {
      let params = {
        areaId: this.$store.state.projectAreaId,
        projectId: this.projectId,
        shouldPay,
      }
      this.axios
        .post('api-d/depositpayconfig/expand/checkTip', params)
        .then((res) => {
          if (!res.data.hasError) {
            this.openCut = true
            this.maxShouldPay = shouldPay
            this.cutRules = res.data.result.freePayTotal
            if (this.cutRules * 1 > 0) {
              this.formData.reduceRemark =
                '根据保证金减免制度，符合保证金减免条件'
            }
          } else {
            this.openCut = false
          }
        })
    },
    //获取缓缴凭证数据
    getHuanData(startDate) {
      let params = {
        areaId: this.$store.state.projectAreaId,
        projectId: this.projectId,
        startDate,
      }
      this.axios
        .post('api-d/depositpayconfig/expand/findWaitPayFileData', params)
        .then((res) => {
          if (!res.data.hasError) {
            this.showWaitPay = true
            this.HGInfo = res.data.result
            let obj = res.data.result.wayPayCycle.split('至')
            this.operationDate = [obj[0], obj[1]]
          } else {
            this.showWaitPay = false
            if (res.data.errorMsg == '该区域保证金缓缴配置已关闭') {
              this.cutSwitch = false
            }
          }
        })
    },
    getCuteData(shouldPay) {
      let params = {
        areaId: this.$store.state.projectAreaId,
        projectId: this.projectId,
        shouldPay,
      }
      this.axios
        .post('api-d/depositpayconfig/expand/getFreePayFileData', params)
        .then((res) => {
          if (!res.data.hasError) {
            this.cutRulesDetail = res.data.result
          }
        })
    },
    agreeChange() {
      this.changeCount()
      this.formData.shouldPay = this.formDataShouldPay.split('-')[0]
    },
    getmsg(data) {
      if (data[0] === 'clearList') {
        //删除刷新
        this.$nextTick(() => {
          this.$router.push({
            path: '/home/cashDeposit/cashDepositList',
            name: 'cashDepositList',
          })
          this.getProjects()
        })
      } else {
        this.projectId = data[0]
        this.depositId = data[2]
        this.projectName = data[1]
        this.method = data[3]
        this.payMethod = data[4]
        this.statusDesc = data[5]
        // 页面刷新
        this.showCurrentPage = false
        this.$nextTick(function () {
          this.showCurrentPage = true
        })
      }
    },
    changeProject(
      projectId,
      depositId,
      projectName,
      statusDesc,
      method,
      payMethod
    ) {
      this.projectId = projectId
      localStorage.removeItem('isFirstUseCashDeposit')
      this.depositId = depositId
      this.projectName = projectName
      this.statusDesc = statusDesc
      this.method = method
      this.payMethod = payMethod
      if (this.statusDesc) {
        this.emptyBox = false
      } else {
        this.emptyBox = true
      }
      // 切换时页面刷新
      this.showCurrentPage = false
      this.$nextTick(function () {
        this.showCurrentPage = true
      })
    },

    getProjects() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.projects = resp.data.result
            if (this.$route.query.projectId) {
              this.projectId = this.$route.query.projectId
              const findOne = this.projects.find(
                (v) => v.code === this.projectId
              )
              // 跳转不显示
              this.depositId = findOne && findOne.depositId
              this.projectName = findOne && findOne.name
              this.method = findOne && findOne.method
              this.payMethod = findOne && findOne.payMethod
            } else {
              if (this.projects.length > 0) {
                this.disabled = false
                this.statusDesc = this.projects[0].approvalStatus
                this.projectId = this.projects[0].code
                this.depositId = this.projects[0].depositId
                this.projectName = this.projects[0].name
                this.method = this.projects[0].method
                this.payMethod = this.projects[0].payMethod
                // this.changeProject(this.projectId,this.depositId,this.projectName,this.approvalStatus,this.method,this.payMethod)
                // 页面刷新
                // this.showCurrentPage = false;
                // this.$nextTick(function () {
                //     this.showCurrentPage = true;
                // });
                if (this.statusDesc) {
                  this.emptyBox = false
                } else {
                  this.emptyBox = true
                }
              } else {
                // this.projectId = "暂无关联项目";
                if (
                  localStorage.getItem('judgeRoleCode') === 'owner' ||
                  localStorage.getItem('judgeRoleCode') === 'constructor'
                ) {
                  this.emptyBox = true
                  return
                } else {
                  this.skipProjectDeclareList()
                }
              }
            }

            if (
              this.isHsUser() &&
              !localStorage.getItem('isFirstUseCashDeposit')
            ) {
              this.isHsFirstLogin(this.projectId)
            }
          } else {
            // this.projectId = "暂无关联项目";
          }
        })
        .catch((resp) => {
          //   this.projectId = "暂无关联项目";
        })
    },

    isHsFirstLogin(projectId) {
      this.axios
        .post('api-p/deposit/expand/checkDepositArchives', { projectId })
        .then((res) => {
          if (!res.data.hasError) {
            if (res.data.result) {
              this.$router.push({
                path: '/home/cashDeposit/cashDepositExplainHS',
              })
            }
          }
        })
    },
    skipProjectDeclareList() {
      this.$confirm('您还未加入项目请前往项目申请页面申报项目', '', {
        confirmButtonClass: 'messageButColor',
        showCancelButton: false,
        showClose: false,
        closeOnClickModal: false,
      })
        .then(() => {
          this.$router.push({
            path: '/home/project/projectDeclareList',
            name: 'projectDeclareList',
            query: {
              type: 'projectDeclareList',
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/projectDeclareList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        })
        .catch(() => {})
    },
    //添加保证金
    addCashDeposit() {
      // this.$router.push("/home/cashDeposit/cashDepositAdd");
      this.$router.push({
        path: '/home/cashDeposit/cashDepositAdd/',
        name: 'cashDepositAdd',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //撤回
    toRecallEvent() {
      this.$confirm(
        '撤回后劳动监察无法查看本条流水，且不计入统计，请及时修改并重新申报，或删除处理，是否确认撤回？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.recall()
        })
        .catch(() => {})
    },
    // 确认撤回
    recall() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/depositrecall',
        data: {
          depositId: this.depositId,
          depositAccassId: '',
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.$message({
                type: 'success',
                message: '撤回成功!',
              })
              //重新加载详情更新页面状态按钮
              this.loadDetail()
            } else {
              this.$message({
                type: 'error',
                message: res.data.errorMsg,
              })
            }
          },
          (response) => {
            this.$message({
              type: 'error',
              message: '数据请求失败',
            })
          }
        )
        .catch((res) => {})
    },
    delCashDeposit() {
      this.$confirm('确认删除该记录吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.axios({
            method: 'post',
            url: 'api-d/deposit/expand/delete',
            data: {
              projectId: this.projectId,
            },
          })
            .then(
              (response) => {
                if (!response.data.hasError) {
                  this.$message({
                    message: '删除成功',
                    type: 'success',
                  })
                  // 刷新子路由页面数据同时页面清空
                  this.showCurrentPage = false
                  this.$nextTick(function () {
                    this.showCurrentPage = true
                    this.getProjects()
                    this.emptyBox = true
                  })
                } else {
                  this.$message({
                    message: response.data.errorMsg,
                    type: 'error',
                  })
                }
              },
              (response) => {}
            )
            .catch((error) => {})
        })
        .catch(() => {
          this.$message.error('取消删除')
        })
    },
    //修改
    updateEvent() {
      this.payFormVisible = true
      // document.getElementById('cutRuleHG').style.display='none'
      //避免打开弹框存在验证问题
      this.$nextTick(() => {
        this.getProjectList()
      })
    },
    //关闭弹框
    closeFormDialog() {
      this.payFormVisible = false
      this.$refs.formData.resetFields()
    },
    getProjectList() {
      // 打开弹框清空，避免一直添加数组
      this.companyOptions = []
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/list',
        data: {
          pageNo: 1,
          pageSize: 20,
          projectId: this.projectId,
          projectName: this.projectName,
          isSa: '',
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.projectOptions = response.data.result.results
            this.getHuanData(
              this.projectOptions[0].projectStartDate.split('-').join('/')
            )
            this.total = response.data.result.total
            this.$nextTick(() => {
              var currentObj = this.projectOptions[0]
              this.formData.projectJson = currentObj
              if (currentObj) {
                this.companyOptions.push(
                  {
                    companyName: currentObj.pcName,
                    companyType: '0', //建设方
                  },
                  {
                    companyName: currentObj.pbName,
                    companyType: '5', //施工方
                  }
                )
                this.getBankNameList(currentObj.areaId)
                this.currentProjectAreaId = currentObj.areaId
                this.currentProjectTotal = currentObj.total
                this.getCountShould(
                  currentObj.areaId,
                  currentObj.total,
                  this.method
                )
                //缴纳修改初始化数据
                this.getCashDepositInfo()
              }
            })
          }
        })
        .catch((error) => {})
    },
    getCountShould(areaId, total, depositType) {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/countshould',
        data: {
          areaId: areaId,
          total: total,
          depositType: depositType,
        },
      })
        .then((response) => {
          var data = response.data
          if (!data.hasError) {
            this.amountPayableList = response.data.result
            if (this.loginType == 'XM') {
              this.getCutRules(response.data.result[0].shouldPay)
              this.getCuteData(response.data.result[0].shouldPay)
            }
          }
        })
        .catch((error) => {})
    },
    getBankNameList(areaId) {
      this.axios({
        method: 'post',
        url: 'api-d/account/expand/finddprobank',
        data: {
          areaId: areaId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            if (data.length > 0) {
              this.noBank = false
              this.bankNameList = data
            } else {
              this.noBank = true
            }
          }
        })
        .catch((error) => {})
    },
    getCashDepositInfo() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id: this.depositId,
        },
      })
        .then((response) => {
          var data = response.data.result
          this.formDataShouldPay = data.shouldPayTotalReal + '-' + data.payScale
          this.formData.projectName = data.projectName
          this.formData.companyName = data.companyName
          this.formData.reciveunit = data.companyType
          this.formData.operationDate = data.operationDate
          if (data.payMethod == 'WAIT_PAY') {
            let obj = data.waitPayCycle.split('至')
            this.operationDate = [obj[0], obj[1]]
          }
          this.formData.method = data.method
          this.formData.payMethod = data.payMethod
          this.formData.bankOne =
            data.bankId + ',' + data.account + ',' + data.bankName
          //相当于点击按钮赋值
          this.changeBankName(this.formData.bankOne)
          this.formData.account = data.account
          this.formData.reduceMoney = data.exemptionAccount
          this.formData.shouldPayTotal = data.shouldPayTotal || '0'
          this.formData.projectTotal = data.projectTotal || '0'
          this.calculatePayTotal = data.payTotalReal || '0'
          this.formData.payTotal = data.payTotalReal || '0'
          //   this.formData.upperLimit = data.upperLimit || "0";
          this.formData.shouldPay = data.shouldPayTotalReal || '0'
          this.formData.payScale = data.payScale || '0'
          this.formData.guaranteeName = data.guaranteeName
          this.formData.guaranteeStartDate = data.guaranteeStartDate
          this.formData.guaranteeEndDate = data.guaranteeEndDate
          this.formData.operator = data.operator
          this.formData.remark = data.remark
          this.formData.reduceRemark = data.remark
          //状态标志图片
          this.status = data.status
          //解决表单业务办理人等验证问题
          this.payTypeChange('noClear')
          //全额免缴
          if (
            this.method === 'FUNDDEPOSIT' &&
            (this.payMethod === 'ALL_NO_PAY' ||
              this.payMethod === 'PART_PAY' ||
              this.payMethod === 'WAIT_PAY')
          ) {
            this.upLoadFile = data.file
            for (var i = 0; i < this.upLoadFile.length; i++) {
              this.srcList.push(this.upLoadFile[i].url)
              this.oldSrcList.push(this.upLoadFile[i].url)
            }
          } else {
            this.uploadPayFile = data.file
            for (var i = 0; i < this.uploadPayFile.length; i++) {
              this.paySrcList.push(this.uploadPayFile[i].url)
              this.oldPaySrcList.push(this.uploadPayFile[i].url)
            }
          }
          // 黄石地区
          if (this.isHsUser()) {
            this.$set(this.formData, 'institution', data.institution)
            this.$set(this.formData, 'branch', data.branch)
            this.$set(this.formData, 'name', data.name)
            this.$set(this.formData, 'cardCode', data.cardCode)
            if (data.method === 'FUNDDEPOSIT') {
              this.$set(this.formRules, 'institution', [
                { required: true, message: '请输入开户银行', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 10,
                  message: '支持输入1-10个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'branch', [
                { required: true, message: '请输入支行名称', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 30,
                  message: '支持输入1-30个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'name', [
                { required: true, message: '请输入账户名称', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 30,
                  message: '支持输入1-30个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'cardCode', [
                { required: true, message: '请输入银行卡号', trigger: 'blur' },
                {
                  required: true,
                  pattern: /^[\d\-\(\)\ ]{7,30}$/,
                  message: '只能输入7-30位数字',
                  trigger: 'blur',
                },
              ])
            } else if (['BANKGUARANTEE', 'BANKPOLICY'].includes(data.method)) {
              this.$set(this.formRules, 'institution', [
                {
                  required: true,
                  message: '请输入寄件人姓名',
                  trigger: 'blur',
                },
                {
                  required: true,
                  min: 1,
                  max: 20,
                  message: '支持输入1-20个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'branch', [
                {
                  required: true,
                  message: '请输入寄件人电话',
                  trigger: 'blur',
                },
                {
                  required: true,
                  pattern: /^[\d\-\(\)\ ]{7,11}$/,
                  message: '只能输入7-11位数字',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'name', [
                { required: true, message: '请输入快递公司', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 10,
                  message: '支持输入1-10个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formRules, 'cardCode', [
                { required: true, message: '请输入快递单号', trigger: 'blur' },
                {
                  required: true,
                  min: 1,
                  max: 30,
                  message: '支持输入1-30个字符',
                  trigger: 'blur',
                },
              ])
              this.$set(this.formData, 'senderFileJson', data.senderFile)
              this.expressFile = data.senderFile
              this.$set(
                this.formData,
                'checked',
                data.isConfirm == 1 ? true : false
              )
              this.$set(this.formRules, 'senderFileJson', [
                {
                  required: true,
                  validator: this.checkExpressFile,
                  trigger: 'change',
                },
              ])
            }
          }
        })
        .catch((error) => {})
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcListPay(val) {
      this.paySrcList = val
    },
    changeBankName(val) {
      // 获取选中的银行卡号
      var bankOne = val.split(',')
      this.formData.bankId = bankOne[0]
      this.formData.account = bankOne[1]
      this.formData.bankName = bankOne[2]
    },
    payTypeChange(type) {
      this.showFileText()
      if (type != 'noClear') {
        this.formDataShouldPay = ''
      }
      if (this.isHsUser()) {
        this.expressFile = []
        this.uploadPayFile = []
        if (type === 'FUNDDEPOSIT') {
          delete this.formData.senderFileJson
          delete this.formRules.senderFileJson
          delete this.formRules.checked
          this.$set(this.formData, 'institution', '')
          this.$set(this.formData, 'branch', '')
          this.$set(this.formData, 'name', '')
          this.$set(this.formData, 'cardCode', '')
          this.$set(this.formRules, 'institution', [
            { required: true, message: '请输入开户银行', trigger: 'blur' },
            {
              required: true,
              min: 1,
              max: 10,
              message: '支持输入1-10个字符',
              trigger: 'blur',
            },
          ])
          this.$set(this.formRules, 'branch', [
            { required: true, message: '请输入支行名称', trigger: 'blur' },
            {
              required: true,
              min: 1,
              max: 30,
              message: '支持输入1-30个字符',
              trigger: 'blur',
            },
          ])
          this.$set(this.formRules, 'name', [
            { required: true, message: '请输入账户名称', trigger: 'blur' },
            {
              required: true,
              min: 1,
              max: 30,
              message: '支持输入1-30个字符',
              trigger: 'blur',
            },
          ])
          this.$set(this.formRules, 'cardCode', [
            { required: true, message: '请输入银行卡号', trigger: 'blur' },
            {
              required: true,
              pattern: /^[\d\-\(\)\ ]{7,30}$/,
              message: '只能输入7-30位数字',
              trigger: 'blur',
            },
          ])
        } else if (['BANKGUARANTEE', 'BANKPOLICY'].includes(type)) {
          this.$set(this.formRules, 'institution', [
            { required: true, message: '请输入寄件人姓名', trigger: 'blur' },
            {
              required: true,
              min: 1,
              max: 20,
              message: '支持输入1-20个字符',
              trigger: 'blur',
            },
          ])
          this.$set(this.formRules, 'branch', [
            { required: true, message: '请输入寄件人电话', trigger: 'blur' },
            {
              required: true,
              pattern: /^[\d\-\(\)\ ]{7,11}$/,
              message: '只能输入7-11位数字',
              trigger: 'blur',
            },
          ])
          this.$set(this.formRules, 'name', [
            { required: true, message: '请输入快递公司', trigger: 'blur' },
            {
              required: true,
              min: 1,
              max: 10,
              message: '支持输入1-10个字符',
              trigger: 'blur',
            },
          ])
          this.$set(this.formRules, 'cardCode', [
            { required: true, message: '请输入快递单号', trigger: 'blur' },
            {
              required: true,
              min: 1,
              max: 30,
              message: '支持输入1-30个字符',
              trigger: 'blur',
            },
          ])
          this.$set(this.formData, 'senderFileJson', [])
          this.$set(this.formData, 'checked', false)
          this.$set(this.formRules, 'senderFileJson', [
            {
              required: true,
              validator: this.checkExpressFile,
              trigger: 'change',
            },
          ])
        }
      }

      //切换缴纳方式应缴金额变化
      this.getCountShould(
        this.currentProjectAreaId,
        this.currentProjectTotal,
        this.formData.method
      )
      this.showForm = false
      //详情初始化为保单类型切换时候
      this.upLoadFile = []
      if (
        this.formData.payMethod == 'WAIT_PAY' &&
        this.loginType == 'XM' &&
        this.showWaitPay &&
        !this.payFormVisible
      ) {
        this.toImageHG()
      }
      if (
        (this.formData.payMethod == 'PART_PAY' ||
          this.formData.payMethod == 'ALL_NO_PAY') &&
        this.loginType == 'XM' &&
        this.openCut
      ) {
        this.getCountShould(
          this.currentObjAreaId,
          this.currentObjTotal,
          this.formData.method
        )
        this.toImage()
      }
      // 重置验证不重置表单内容
      this.$nextTick(() => {
        this.showForm = true
        // this.$refs.formData.clearValidate();
      })
    },
    submitFormUptate(params) {
      this.isSaveLoading = true
      //资金存入
      var fundDeposit = this.formData.method === 'FUNDDEPOSIT'
      var allPay = this.formData.payMethod === 'ALL_PAY'
      var partPay = this.formData.payMethod === 'PART_PAY'
      var allNoPay = this.formData.payMethod === 'ALL_NO_PAY'
      var waitPay = this.formData.payMethod === 'WAIT_PAY'
      var fileJson, exemptionAccount, payTotal
      if (fundDeposit && (partPay || allNoPay || waitPay)) {
        fileJson = JSON.stringify(this.upLoadFile)
      } else {
        fileJson = JSON.stringify(this.uploadPayFile)
      }
      // 减免金额和全额免缴 都传 exemptionAccount
      if (fundDeposit && partPay) {
        exemptionAccount = this.formData.reduceMoney
      } else if (fundDeposit && allNoPay) {
        // exemptionAccount = this.formData.shouldPay;
        exemptionAccount = this.formDataShouldPay.split('-')[0]
      } else {
        exemptionAccount = ''
      }
      //1.全额免缴和缓缴没有实缴金额   2.部分免缴中 实缴由计算得出
      if (fundDeposit && (allNoPay || waitPay)) {
        payTotal = ''
      } else if (fundDeposit && partPay) {
        payTotal = this.calculatePayTotal
      } else {
        payTotal = this.formData.payTotal
      }
      var data = {
        id: this.depositId, //保证金id
        projectJson: JSON.stringify(this.formData.projectJson),
        companyType: this.formData.reciveunit,
        method: this.formData.method,
        // 资金存入-缴纳形式
        payMethod: fundDeposit ? this.formData.payMethod : '',
        operationDateString: this.formData.operationDate,
        // 资金存入-（全额缴纳/部分免缴）存在缴纳银行和缴纳账号信息
        bankId: fundDeposit && (allPay || partPay) ? this.formData.bankId : '',
        bankName:
          fundDeposit && (allPay || partPay) ? this.formData.bankName : '',
        account:
          fundDeposit && (allPay || partPay) ? this.formData.account : '',
        // shouldPayTotal: this.formData.shouldPay,
        shouldPayTotal: this.formDataShouldPay.split('-')[0],
        payScale: this.formDataShouldPay.split('-')[1], //后台新增字段
        // 全额免缴和缓缴没有实缴金额
        payTotal: payTotal, //实缴金额
        exemptionAccount: exemptionAccount,
        //非资金存入 担保机构，担保生效日，担保失效日
        guaranteeName: fundDeposit ? '' : this.formData.guaranteeName,
        guaranteeStartDateString: fundDeposit
          ? ''
          : this.formData.guaranteeStartDate,
        guaranteeEndDateString: fundDeposit
          ? ''
          : this.formData.guaranteeEndDate,
        operator: this.formData.operator,
        //部分免缴，全额免缴，缓缴 原因为必填项
        remark:
          fundDeposit && (partPay || allNoPay || waitPay)
            ? this.formData.reduceRemark
            : this.formData.remark,
        // 部分免缴的    缴纳凭证用noAllPayFileJson  其他凭证名字都用fileJson
        //减免凭证，缓缴凭证，缓缴凭证
        noAllPayFileJson:
          fundDeposit && partPay ? JSON.stringify(this.uploadPayFile) : [],
        //缴纳凭证
        // 非资金存入及资金存入全额缴纳/部分缴纳有缴纳凭证
        fileJson: fileJson,
      }
      if (waitPay) {
        data.waitPayCycle = this.operationDate[0] + '至' + this.operationDate[1]
      }
      // 黄石地区 添加另外的4个参数

      if (this.isHsUser()) {
        data.institution = this.formData.institution
        data.branch = this.formData.branch
        data.name = this.formData.name
        data.cardCode = this.formData.cardCode

        if (['BANKGUARANTEE', 'BANKPOLICY'].includes(this.formData.method)) {
          data.senderFileJson = JSON.stringify(this.expressFile)
          data.isConfirm = this.formData.checked ? 1 : 0
        }
      }
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/eidtdeposit',
        data: data,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '修改成功',
              type: 'success',
            })
            this.payFormVisible = false
            // 刷新子路由页面数据
            this.showCurrentPage = false
            this.$nextTick(function () {
              this.showCurrentPage = true
              this.method = this.formData.method
              this.payMethod = this.formData.payMethod
              //重新加载详情更新页面状态按钮
              this.loadDetail()
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    //保存跳转到详情
    saveToDetail() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.$confirm(
            '是否提交缴存备案申报，提交后劳动监察会对本次备案进行审核，审核通过后即可纳入正式备案统计',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
              this.submitFormUptate()
            })
            .catch(() => {})
        } else {
          return false
        }
      })
    },
    goBack() {
      this.$router.push('/home/cashDeposit/cashDepositList')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //计算部分免缴中的实缴金额
    changeCount() {
      let shouldPay = this.formDataShouldPay.split('-')[0]
      //   let shouldPay = this.formDataShouldPay.substring(0,this.formDataShouldPay.lastIndexOf("-"))
      if (this.formData.reduceMoney > 0 && shouldPay) {
        this.axios({
          method: 'post',
          url: 'api-d/deposit/expand/calculaccount',
          data: {
            shouldPay: shouldPay,
            exemptionAccount: this.formData.reduceMoney,
          },
        })
          .then((response) => {
            if (!response.data.hasError) {
              this.calculatePayTotal = response.data.result.payTotal
            } else {
              this.$message({
                type: 'error',
                message: response.data.errorMsg,
              })
            }
          })
          .catch((error) => {})
      } else {
        this.calculatePayTotal = ''
      }
    },
    loadDetail() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id: this.depositId,
        },
      })
        .then((response) => {
          this.statusDesc = response.data.result.approvalStatusDesc
        })
        .catch((error) => {})
    },
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    getFile(val) {
      this.upLoadFile = val
    },
    getFileListPay(val) {
      this.paySrcList.push(val)
      this.oldPaySrcList.push(val)
    },
    getFilePay(val) {
      this.uploadPayFile = val
    },
    showFileText() {
      if (this.formData.method == 'FUNDDEPOSIT') {
        this.limitationFactorPay.methodTip =
          '请上传缴款回执单，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else if (this.formData.method == 'BANKGUARANTEE') {
        this.limitationFactorPay.methodTip =
          '请上传银行保函单，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else if (this.formData.method == 'OWNERPOLICY') {
        this.limitationFactorPay.methodTip =
          '请上传业主担保单，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else {
        this.limitationFactorPay.methodTip =
          '请上传保险保单，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      }
      if (this.formData.payMethod == 'PART_PAY') {
        this.limitationFactor.methodTip =
          '请上传减免凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else if (this.formData.payMethod == 'ALL_NO_PAY') {
        this.limitationFactor.methodTip =
          '请上传免缴凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      } else if (this.formData.payMethod == 'WAIT_PAY') {
        this.limitationFactor.methodTip =
          '请上传缓缴凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .topTitle {
    padding: 0 24px 0 10px;
    height: 64px;
    line-height: 64px;
    .topContentBox {
      /deep/.el-input__inner {
        // font: bold 24px Microsoft YaHei;
        font-size: 22px;
        font-weight: bold;
        color: #333333;
        border: none;
        height: 30px;
        line-height: 30px;
        margin-top: 18px;
        // background: #e4ebf1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /deep/.el-select__caret {
        color: #333;
        font-size: 20px;
        line-height: 30px;
      }
      &:after {
        display: none;
      }
      .startStatus {
        vertical-align: text-bottom;
        display: inline-block;
        width: 48px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        text-align: center;
        font-size: 12px;
      }
      .greenColor {
        background: #009588;
      }
      .grayColor {
        background: #657282;
      }
      .yellowColor {
        background: #ffc100;
      }
      .redColor {
        background: #d9544f;
      }
      /deep/ .dbType {
        // .return {
        //   margin-right: 24px;
        // }
        .delete {
          background: #3e5265;
          border-color: #3e5265;
          color: #fff;
          margin-left: 0;
          margin-right: 24px;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
  .mainCons {
    min-height: calc(100% - 67px);
    .emptyBox {
      margin-top: 80px;
      color: #909399;
      text-align: center;
      font-size: 14px;
      letter-spacing: 1px;
      img {
        margin-top: 20px;
      }
    }
  }
  //缴纳凭证附件样式

  .greenWord {
    color: #009588;
    font-weight: bold;
  }
  .payFormXg .uploadBoxPay {
    position: relative;
    .uploadImg {
      width: 96px;
      height: 40px;
      color: #009588;
      border: 1px solid #009588;
      cursor: pointer;
    }
    .uploadImgState {
      font-size: 14px;
      color: #999999;
      margin-left: 12px;
      opacity: 1;
    }
    .upLoadDom {
      position: absolute;
      width: 96px;
      height: 40px;
      top: 0;
      left: 0;
      opacity: 0;
      line-height: 0px;
      form {
        input {
          width: 96px;
          height: 40px;
          line-height: 0px;
          cursor: pointer;
        }
      }
    }
  }
  .imgStyle {
    padding-left: 120px;
    li {
      position: relative;
      margin-right: 20px;
      // margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
}
.ratioWidth {
  width: 340px !important;
  .el-input__inner {
    width: 340px !important;
  }
}
.radioTipsBox {
  position: relative;
  margin-bottom: 30px;
  .radioTips {
    position: absolute;
    left: -100px;
    top: 30px;
    color: red;
    padding-left: 120px;
  }
}
#cutRule,
#cutRuleHG {
  width: 550px;
  height: 200px;
  // display: none;
  .title {
    line-height: 40px;
    font-size: 16px;
    color: #666;
    text-align: center;
  }
  table {
    border-color: #999;
    border: 1px;
  }
  td {
    width: 25%;
    font-size: 14px;
    color: #999;
    line-height: 30px;
    padding: 0 5px;
  }
}
.bondTips {
  p {
    line-height: 24px;
    span {
      display: inline-block;
      width: 200px;
    }
  }
}
</style>
